<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { usePrefix } from '@season-designable/vue';
import { ElInput, ElUpload, UploadProps } from 'element-plus';

const prefix = usePrefix('image-input');

const props = defineProps(['value']);
const emit = defineEmits(['change']);

const handleChange: UploadProps['onChange'] = (uploadFile) => {
  console.log(uploadFile);
  // const response = params.file?.response;
  // const url =
  //   response?.url ||
  //   response?.downloadURL ||
  //   response?.imageURL ||
  //   response?.thumbUrl ||
  //   response?.data;
  // if (!url) return;
  emit('change', uploadFile.name);
};
</script>

<template>
  <div :class="prefix">
    <ElInput
      :modelValue="props.value"
      @update:modelValue="
        (e) => {
          emit('change', e);
        }
      "
    >
      <template #prefix>
        <ElUpload
          :auto-upload="false"
          :show-file-list="false"
          @change="handleChange"
        >
          <Icon icon="mdi:tray-arrow-up" :style="{ cursor: 'pointer', fontSize: '16px' }"></Icon>
        </ElUpload>
      </template>
    </ElInput>
  </div>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';

.dn-image-input {
  width: 100%;

  :deep(.el-upload) {
    display: flex;
  }
  // :deep(.#{$element-prefix}-upload-list) {
  //   margin: 0;
  // }
  // .#{$element-prefix}-popover-inner-content {
  //   padding: 0 !important;
  //   user-select: none;
  // }

  // :deep(.#{$element-prefix}-input__prefix) {
    // padding-top: 2px;
    //   display: flex;
    //   color: $text-color;
    //   align-items: center;
    // }
    // .el-input--prefix {
    //   .#{$element-prefix}-input__inner {
    //   }
  // }
}
</style>
